<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            margin: 20px 10px;
        }

        img {
            margin-top: 5px;
        }
    </style>
</head>

<body>
    <button id="btn">1.点我试试</button>
    <div>1.不要点我呀</div>

    <button id="btns">2.点击获取当前时间</button>
    <span>显示当前时间</span>
    <br>
    <div>
        <button id="ldh">3.刘德华</button>
        <button id="zxy">3.张学友</button>
        <br>
        <img src="images/ldh.jpg" alt="" title="刘德华">
    </div>
    <script>
        //1.点击事件
        var btns = document.getElementById('btn');
        btns.onclick = function () {
            alert("点我你会后悔的哦!!!");
        }
        var div = document.querySelector('div');
        div.onclick = function () {
            alert('莫点我,你这孩子咋不听!!')
        }

        //2.显示时间
        var btns = document.querySelector('#btns');
        var span = document.querySelector('span');
        btns.onclick = function () {
            span.innerHTML = getTime();
            span.style.color = 'blue';
        }

        function getTime() {
            var time = new Date()
            var year = time.getFullYear();
            var month = time.getMonth() + 1;
            var dates = time.getDate();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;
            var m = time.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
            return year + '/' + month + '/' + dates + ' ' + h + ':' + m + ':' + s;
        }
        console.log('现在时间是:' + getTime());

        //3.点击切换图片
        var ldh = document.querySelector('#ldh');
        var zxy = document.querySelector('#zxy');
        var img = document.querySelector('img');
        zxy.onclick = function () {
           img.src = 'images/zxy.jpg';
           img.title = '张学友';
        }
        ldh.onclick = function () {
           img.src = 'images/ldh.jpg';
           img.title = '刘德华';
        }
    </script>
</body>

</html>